/********************************************************************************
 * Copyright (c) 2021,2022 Contributors to the CatenaX (ng) GitHub Organisation
 *
 * See the NOTICE file(s) distributed with this work for additional
 * information regarding copyright ownership.
 *
 * This program and the accompanying materials are made available under the
 * terms of the Apache License, Version 2.0 which is available at
 * https://www.apache.org/licenses/LICENSE-2.0.
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations
 * under the License.
 *
 * SPDX-License-Identifier: Apache-2.0
 ********************************************************************************/

.part-detail {
  &--spinner {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  &--container {
    position: absolute;
    background: none;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    pointer-events: none;
  }

  &--open {
    pointer-events: unset;
  }

  &--sidenav {
    @apply flex bg-dustyGrayShadeWildSand;
    align-items: center;
    justify-content: center;
    min-width: 900px;
    padding: 25px;
  }

  &--part-info {
    @apply flex flex-row;
    justify-content: space-between;
    padding-bottom: 25px;

    @media (max-width: 1024px) {
      @apply flex-col;
      padding-bottom: unset;
    }
  }

  &--manufacturer-info {
    @apply flex flex-row;
    justify-content: space-between;

    @media (max-width: 1024px) {
      @apply flex-col;
    }
  }

  &--relation__container {
    height: 100%;
    display: flex;
    flex-direction: column;

    & > app-part-relation {
      height: 100%;
    }
  }

  &--relation__card {
    min-height: 400px;
    display: flex;
    flex-direction: column;
  }

  &--relation__icon {
    &:hover {
      cursor: pointer;
    }
  }
}

app-card-list {
  width: 45%;
  min-width: 250px;
  height: 400px;

  @media (max-width: 1024px) {
    width: unset;
    margin-bottom: 1rem;
    height: 250px;
  }
}

mat-card {
  width: 45%;
  min-width: 250px;
  height: 400px;

  @media (max-width: 1024px) {
    width: unset;
    margin-bottom: 1rem;
    height: 250px;
  }
}

.card-list {
  min-height: 100%;

  &--row {
    display: table-row;
  }

  &--cell {
    display: table-cell;
  }

  &--key {
    padding-right: 10px;
    font-weight: bold;
  }

  &--value {
    text-overflow: ellipsis;
  }

  &--icon {
    display: flex;

    &:hover {
      @apply text-primary;
      cursor: pointer;
    }
  }

  &--qualityType {
    display: flex;
    align-items: center;
    width: 100%;

    & > app-select {
      width: 90%;
    }

    & > mat-icon {
      width: 10%;
      text-align: center;
      cursor: pointer;

      &:hover {
        @apply text-primary;
      }
    }
  }
}
